<template>
  <view class="mine">
    <view class="user-info-wrap">
      <view class="user-left-area">
        <u-avatar :src="avatarSrc"></u-avatar>
        <text>{{ userinfo.nickname ? userinfo.nickname : "会员登录" }}</text>
      </view>
      <view class="user-right-area"> </view>
      <view class="user-num">NO.1</view>
    </view>
    <!--     <view class="user-ops-wrap">
      <view class="user-ops">
        <view class="user-ops-icon">
          <u-icon name="zhifubao" color="#ffbf01" size="28"></u-icon>
        </view>
        <view class="user-ops-des">
          <view class="user-ops-des-text">余额</view>
          <view class="user-ops-des-text">170元</view>
        </view>
      </view>
      <view class="user-ops">
        <view class="user-ops-icon">
          <u-icon name="calendar-fill" color="#ffbf01" size="28"></u-icon>
        </view>
        <view class="user-ops-des">
          <view class="user-ops-des-text">预约</view>
          <view class="user-ops-des-text">1</view>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userinfo"]),
    avatarSrc() {
      return this.userinfo.avatar
        ? this.userinfo.avatar
        : "https://cdn.uviewui.com/uview/album/3.jpg";
    },
  },
};
</script>

<style>
page {
  background-color: #f4f4f4;
}
</style>
<style lang="scss" scoped>
.mine {
  .user-info-wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 30rpx;
    padding: 30rpx 30rpx 160rpx 30rpx;
    border-radius: 20rpx;
    background: linear-gradient(90deg, #dc9a61, #e4c29f);
    .user-left-area {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 600;
      text {
        padding: 0 20rpx;
        color: #26201d;
      }
    }
    .user-num {
      position: absolute;
      bottom: 30rpx;
      color: #26201d;
    }
  }
  .user-ops-wrap {
    display: flex;
    margin: 30rpx;
    box-sizing: border-box;
    .user-ops {
      display: flex;
      width: 50%;
      padding: 30rpx;
      border-radius: 10rpx;
      background-color: #ffffff;
      .user-ops-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80rpx;
        width: 80rpx;
        border-radius: 50%;
        background: #faf2e7;
      }
      .user-ops-des {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #898989;
        font-size: 24rpx;
        padding: 0 20rpx;
        .user-ops-des-text:last-child {
          color: #353535;
          font-size: 28rpx;
          font-weight: 600;
        }
      }
    }
    .user-ops:first-child {
      margin-right: 12rpx;
    }
    .user-ops:last-child {
      margin-left: 12rpx;
    }
  }
}
</style>
